<template>
  <view class="app-container class-images" >
    <u-navbar :back-icon-color="'#EAEAE3'" :is-fixed="false" back-icon-size="44"
      :background="{background: 'rgba(235, 233, 255, 0.0)'}" :border-bottom="false"
      :back-text-style="{color:'#EAEAE3'}" :is-back="false">
	  <image src="../../../static/image/left.png" @click="returnPage" style="width: 50rpx; height: 50rpx; margin-left: 20rpx;"></image>
      <view style="margin-left: 30rpx;">
        <u-search style="border-radius: 50rpx; color: #FFFFFF;" placeholder-color="#1F5C50"
          :bg-color="'rgba(235, 233, 255, 0.2)'" placeholder="输入关键字搜索" :show-action="false"
          v-model="skuSearchParam.searchVal" @search="search()">
        </u-search>
      </view>      
      <!-- <view style="margin-right: 30rpx;" @click="navTo('/pages/sys/home/store')">
      </view> -->
    </u-navbar>

    <view class="top-section">
      <u-row>
        <u-col span="2" text-align="center">
          <view>
            <image :src="shop.logo" class="shop-avatar"></image>
          </view>
        </u-col>
        <u-col span="7">
			<view style="display: flex; flex-direction: row; align-items: center;">
				<view calss="shop-name">{{ shop.shopName }}</view>
				<image src="/static/fenxiang.png" style="width: 32rpx;height: 32rpx; margin-left: 16rpx;" @click="">
				</image>
			</view>
          
          <view class="star-rank">
            <image v-for="i in 5" :key="i" src="/static/image/shop/star.png"></image>
          </view>
        </u-col>
        <u-col span="3">
          <view @click="followShop()">
            <view class="followed" v-if="isFollowed">
              <!-- <image src="/static/image/shop/followed.png"></image> -->
              <view>已关注</view>
            </view>
            <view class="follow" v-else>
              <image src="/static/image/shop/follow.png"></image>
              <view>关注</view>
            </view>
          </view>
        </u-col>
      </u-row>
      <u-row style="font-size: 24rpx;color: #FFFFFF;">
        <u-col span="2" text-align="center">
          满意度:
        </u-col>
        <u-col span="3" style="padding: 0 0 6rpx;">
          <u-line-progress active-color="#FFE362" :percent="100" height="8" :show-percent="false"></u-line-progress>
        </u-col>
        <u-col span="7">{{ 100 }}%</u-col>
      </u-row>
    </view>

    <!-- 间隔槽 -->
    <u-gap height="10" bg-color="rgb(255, 255, 255, 0)"></u-gap>

    <!--  领券 -->
    <!-- <view class="coupon-section" @click="showCoupon = true" v-if="couponList.length>0">
      <view>
        <u-button type="error" style="margin-right:10px;height:20px;line-height: 20px;" size="mini">领券</u-button>
      </view>
      <view v-for="(item,index) in couponList" v-if="index<3">
        <u-button type="error" style="margin-right:5px;height:20px;line-height: 20px;" plain size="mini">
          <text v-if="item.conditionAmount>0">满{{item.conditionAmount}}</text>
          <text v-else>立</text>
          <text v-if="item.type=='CASH'">减{{item.benefitCash}}</text>
          <text v-if="item.type=='DISCOUNT'">享{{item.benefitDiscount/10}}折</text>
        </u-button>
      </view>

      <view class="coupon-btn">
        <text class="yticon icon-you"></text>
      </view>
    </view> -->
    <!-- 领优惠券弹出框 -->
    <!-- <u-popup v-model="showCoupon" mode="bottom" :closeable="true" border-radius="14" width="100%" height="800">
      <view class="coupon-title">领优惠券</view>
      <view class="coupon-list">
        <view class="coupon-list-item" v-for="item in couponList">
          <u-row>
            <u-col span="4">
              <view class="coupon-left">
                <view class="c1">
                  <text class="amount" v-if="item.type=='CASH'">{{item.benefitCash}}</text>
                  <text class="discount" v-if="item.type=='DISCOUNT'">{{item.benefitDiscount/10}}</text>
                </view>
                <view class="c2">
                  <text v-if="item.conditionAmount>0"> 满{{item.conditionAmount}}元可用</text>
                  <text v-else> 无门槛</text>
                </view>
              </view>
            </u-col>
            <u-col span="8" class="coupon-right">
              <view class="c1">
                <text v-if="item.benefitType=='0'">全场通用</text>
                <text v-if="item.benefitType=='1'">指定商品</text>
              </view>
              <view class="c2">
                <text v-if="item.validType==1"> 有效期至{{item.endDate}}</text>
                <text v-if="item.validType==2"> 领取后{{item.validDays}}天内有效</text>
              </view>
              <view class="c3">
                <u-button plain size="mini " type="error" @click="getCoupon(item)">立即领取</u-button>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
    </u-popup> -->
	<view class="show-data-body-box">
		
		<view class="body-section">
		  <u-tabs :show-bar="true" active-color="#4CA775" :list="tabList" :is-scroll="false" :current="current"
			@change="change" bg-color="rgb(255, 255, 255, 0)" inactive-color="#111111"></u-tabs>
		  </u-row>
		  <u-notice-bar class="notice-bar" color="#545454" padding="18rpx 20rpx" bg-color="#FFFFFF" font-size="24"
			:list="noticeWords" v-show="false">
		  </u-notice-bar>

		  <!-- <u-row v-if="current == 0">
			<u-col span="6" style="padding-left: 0;">
			  <view class="mid-tag" @click="callMerchant()">
				<view>可约时间</view>
				<image src="/static/image/shop/time.png"></image>
				<view>今日可约</view>
			  </view>
			</u-col>
			<u-col span="6" style="padding-right: 0;">
			  <view class="mid-tag">
				<view>服务商圈</view>
				<image src="/static/image/shop/build.png"></image>
				<view>金融街、西单等</view>
			  </view>
			</u-col>
		  </u-row>

		  <image src="https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/07/27/ccff82c8-344e-4c1b-b222-80bfb8446eea.png" style="width: 100%;height: 127rpx;margin-top: 10rpx;"
			v-if="current == 0"></image> -->

		<view class="goods-list" v-show="current == 0 || current == 1">
		  <view v-for="item in goodsList" :key="item.skuId" class="goods-item" @click="navToDetailPage(item)">
			<image :src="item.skuDefaultImg == null || item.skuDefaultImg == ''?item.imgUrl:item.skuDefaultImg" mode="widthFix" class="sku-img"></image>
			<text class="title">{{ item.skuName }}</text>
			<view class="price-box">
			  <text class="price">{{ item.price }}</text>
			  <text>已售 {{ item.saleCount }}</text>
			</view>
		  </view>
		</view>
		<uni-load-more :status="skuLoadType"></uni-load-more>

		  <view class="group-buy" v-show="current == 2"></view>

		  <view class="comment-list" v-for="(comment, index) in commentList" :key="index" v-show="current == 3">
			<view class="eva-box">
			  <image class="portrait" :src="comment.userDTO.photoUrl||'/static/missing-face.png'" mode="aspectFill"></image>
			  <view class="right">
				<view class="bot">
				  <text class="attr">{{comment.userDTO.name}}</text>
				  <text class="time">{{comment.evaluateTime}}</text>
				</view>
				<view class="star">
				  <image src="/static/temp/redstar.png" mode="" v-if="i<comment.commentRank" v-for="(item,i) in stars">
				  </image>
				</view>
				<text class="con">{{comment.commentContent||''}}</text>
			  </view>
			</view>
			<view class="eva-image">
			  <image @click="previewImage(url)" :src="url" mode="aspectFill" v-for="(url, uid) in comment.imageUrlList" :key="uid"></image>
			</view>
			<view class="eva-reply" v-if="comment.replayContent">
			  <text>卖家回复: {{comment.replayContent}}</text>
			</view>
		  </view>

		</view>
	</view>
  </view>
</template>

<script>
  import empty from "@/components/empty";
  import {
    mapState,
    mapMutations
  } from 'vuex';

  export default {
    components: {
      empty
    },
    data() {
      return {
        shopId: '',
        shop: {},
        isFollowed: false,
		isQrCodeGo: false,
        tabList: [{
            name: '首页'
          }, {
            name: '全部'
          }
          // , {
          //   name: '拼团'
          // }, {
          //   name: '评价'
          // },
        ],
        skuSearchParam: {
          pageNum: 1,
          shopId: '',
          searchVal: '',
        },
        // 店铺商品加载状态
        skuLoadType: 'more',
        current: 0,
        total: 0,
        pageSize: 10,
        pageNum: 1,
        goodsList: [],
        commentList: [],
        // showCoupon: false,
        // couponList: [],
        stars: [0, 0, 0, 0, 0],
        noticeWords: ['店铺公告：欢迎光临本店']
      }
    },
    onLoad(option) {
		// const scene = decodeURIComponent(option.scene)
		console.log(option.scene);
		if(option.scene == null){
			this.skuSearchParam.shopId = this.shopId = option.id;
			this.isQrCodeGo = false
		}else {
			this.skuSearchParam.shopId = this.shopId = option.scene
			this.isQrCodeGo = true
		}
		  // 店铺基本信息
		  this.inquiryShop();
		  // 店铺商品
		  this.searchProduct();
		  // 店铺公告
		  this.getNotices();
		  if (this.hasLogin) { // 用户登录了就检查关注状态
			this.checkFollowed();
		  }
    },
    //加载更多
    onReachBottom() {
      if (this.current == 0 || this.current == 1) {
        if (this.skuLoadType != 'no-more') {
          this.skuSearchParam.pageNum++;
          this.searchProduct();
        }
      } else if (this.current == 2) {
        this.searchProductComment(this.shopId);
      }
    },
    computed: {
      ...mapState(['hasLogin', 'userInfo', 'token'])
    },
    methods: {
      change(index) {
        this.current = index;
        this.resetPage();
        if (index == 0 || index == 1) {
			this.skuSearchParam.pageNum = 1
          this.searchProduct();
        } else if (index == 2) {
          this.searchProductComment(this.shopId);
        }
      },
	  // 返回上一页
	  returnPage(){
		  if(this.isQrCodeGo == true){
			  uni.switchTab({
			  	url: "/pages/sys/home/index"
			  })
		  }else{
			  uni.navigateBack({
			  	delta: 1
			  })
		  }
	  },
      //重置商品及分页
      resetPage() {
        this.pageNum = 1;
        this.total = 0;
        this.goodsList = [];
        this.commentList = [];
      },
      //搜索商品
      search(e) {
        this.current = 1;
        this.resetPage();
        this.searchProduct();
      },
      //查询商家详情
      inquiryShop() {
        try {
          this.$api.request.getShopInfo({
            id: this.shopId
          }, res => this.shop = res.data);
        } catch (e) {
          console.log(e);
        }
      },
      //搜索商品
      searchProduct() {
        let that = this;
        this.skuLoadType = 'loading';
        this.$api.request.getShopSkuList(this.skuSearchParam, res => {
          uni.stopPullDownRefresh();
          if (that.skuSearchParam.pageNum > 1) {
            res.data.records.forEach(item => that.goodsList.push(item));
          } else {
            that.goodsList = res.data.records;
          }
          that.skuLoadType = res.data.pages <= res.data.current ? 'no-more' : 'more';
        }, true);
      },
      searchProductComment(shopId) {
        let postData = {
          keyArray: ['MERCHANT'],
          shopId: shopId,
          startIndex: (this.pageNum - 1) * this.pageSize,
          pageSize: this.pageSize
        }
        this.$api.request.goodsComment(postData, res => {
          if (res.body.status.statusCode === '0') {
            var commentList = res.body.data.commentList;
            this.commentList = this.commentList.concat(commentList);
            this.total = res.body.data.total;
          } else {
            console.log(res.body.status.errorDesc);
          }
        }, true);
      },
      // //搜索优惠券
      // searchCoupon() {
      //   let postData = {
      //     keyArray: ['ACTIVE', 'MERCHANT'],
      //     shopId: this.shopId,
      //     active: true,
      //     startIndex: 0,
      //     pageSize: 100
      //   };
      //   this.$api.request.couponList(postData, res => {
      //     if (res.body.status.statusCode === '0') {
      //       var coupons = res.body.data.coupons;
      //       this.couponList = coupons
      //     }
      //   }, true);
      // },
      // //领取优惠券
      // getCoupon(item) {
      //   this.$api.request.getCoupon({
      //     actionType: 'RECEIVE',
      //     couponDTO: {
      //       couponUuid: item.couponUuid,
      //     },
      //     userDTO: {
      //       userUuid: this.userInfo.userUuid
      //     },
      //     receiveChannel: 'SELF'
      //   }, res => {
      //     if (res.body.status.statusCode === '0') {
      //       this.$api.msg('领取成功');
      //     } else {
      //       this.$api.msg(res.body.status.errorDesc);
      //     }
      //   }, false);
      // },
      // 是否已关注店铺
      checkFollowed() {
        try {
          this.$api.request.isFollowShop({
            shopId: this.shopId
          }, res => this.isFollowed = res.data);
        } catch (e) {
          console.log(e);
        }
      },
      // 关注（取消关注）店铺
      followShop() {
        try {
          this.$api.request.followShop({
            shopId: this.shopId,
            shopName: this.shop.shopName,
            shopLogo: this.shop.logo
          }, res => {
            this.isFollowed = !this.isFollowed;
            this.$u.toast(res.message);
          });
        } catch (e) {
          console.log(e);
        }
      },
      //导航到商品详情页
      navToDetailPage(item) {
		uni.navigateTo({
			url: '/pages/sys/home/product?id=' + item.skuId
		})
		// if(item.skuType == '1'){
		// 	uni.navigateTo({
		// 		url: '/pages/sys/home/product?id=' + item.skuId
		// 	})
		// }else {
		// 	uni.navigateTo({
		// 		url: '/pagesA/appointment/service/reserve?id=' + item.skuId
		// 	})
		// }
      },
      // 获取店铺公告列表
      getNotices() {
        try {
          this.$api.request.getNoticeList({
            shopId: this.shopId
          }, res => this.noticeWords = res.data);
        } catch (e) {
          console.log(e);
        }
      },
      previewImage(url) {
        var urls = [];
        urls.push(url);
        uni.previewImage({
          current: url,
          indicator: "number",
          loop: "true",
          urls: urls
        })
      },
      openLocation() {
        uni.openLocation({
          latitude: this.merchant.latitude,
          longitude: this.merchant.longitude,
          success: function() {
            console.log('打开地图成功');
          }
        });
      },
      callMerchant() {
        uni.makePhoneCall({
          phoneNumber: this.shop.receivePhone
        });
      }
    }
  }
</script>

<style lang='scss' scoped>
  .content {
    position: relative;
  }
	.class-images{
		color: #EAEAE3;
		height: 100%;
		min-height: 100vh;
		background-color: #F5F5F5 !important;
		background-size: 100% auto !important;
		background: url("https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/08/04/3b16dce8-551b-48ca-9957-f9ce743862d0.jpg") no-repeat;
	}

  .app-container {
    font-size: 40rpx;

    .top-section {
      background-color: rgba(255, 255, 255, 0);
      padding: 27rpx 10rpx 10rpx;

      .shop-avatar {
        width: 75rpx;
        height: 75rpx;
        border-radius: 12rpx;
        margin-top: 10rpx;
      }

      .shop-name {
        color: #FFFFFF;
        line-height: 32rpx;
        font-size: 32rpx;
      }

      .star-rank {
        width: 140rpx;
        display: flex;
        margin-top: 5rpx;
        padding: 3rpx 10rpx;
        line-height: 29rpx;
        border-radius: 15rpx;
        background-color: #307468;

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .follow,
      .followed {
        height: 60rpx;
        display: flex;
        font-size: 30rpx;
        line-height: 42rpx;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
        
        border-radius: 15px;

        image {
          margin-left: 10rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }

      .follow {
        width: auto;

		background: linear-gradient(145deg, #33CA7C 0%, #48EB9C 100%);
      }

      .followed {
        width: auto;
		color: #07BB07;
		background: linear-gradient(145deg, yellow 0%, yellow 100%);
      }
    }
	
	.show-data-body-box{
		width: 100vw;
		background: linear-gradient(180deg, #FBFBFC 0%, #FFFFFF 12%, #F5F6F7 100%);
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
		border-radius: 15px 15px 0px 0px;
	}
	
    .body-section {
      margin: 0 21rpx;
	  color: #111111;

      .notice-bar {
        /deep/ .uicon-volume-fill {
          color: #65AC9E !important;
        }
      }

      .mid-tag {
        height: 73rpx;
        display: flex;
        font-size: 22rpx;
        margin-top: 10rpx;
        line-height: 40rpx;
        padding: 16rpx 0 0 18rpx;
        border-radius: 12rpx;
        background-color: #65AC9E;

        image {
          width: 40rpx;
          height: 40rpx;
          margin: 0 6rpx;
        }
      }

      /* 商品列表 */
      .goods-list {
        column-count: 2;
        column-gap: 20rpx;
		margin-top: 20rpx;

        .goods-item {
			break-inside: avoid;
			width: 100%;
			height: 100%;
			  display: flex;
			  padding-bottom: 10rpx;
			  border-radius: 15rpx;
			  margin-bottom: 30rpx;
			  flex-direction: column;
			  background-color: #FFFFFF;
			  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);

			  &:nth-child(2n+1) {
				margin-right: 2%;
			  }
		  
		  .sku-img {
		  	width: 100%;
		  	height: 100%;
		  	min-height: 300rpx;
		  	border-top-left-radius: 20rpx;
		  	border-top-right-radius: 20rpx;
		  }
		  
		  .title {
		    color: #000000;
		    font-weight: bold;
		    font-size: 26rpx;
		    line-height: 32rpx;
		    margin: 12rpx 0;
			margin-left: 20rpx;
		  }
		  
		  .price-box {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding-right: 10rpx;
		    font-size: 24rpx;
		    color: $font-color-light;
			margin-left: 20rpx;
		  }
		  
		  .price {
		    font-size: $font-lg;
		    color: $uni-color-primary;
		    line-height: 1;
		  
		    &:before {
		      content: '￥';
		      font-size: 26rpx;
		    }
		  }
        }
		

        
      }

      /* 领券 */
      .coupon-section {
        display: flex;
        align-items: center;
        color: $font-color-base;
        padding: 12rpx 30rpx;

        .coupon-btn {
          flex: 1;
          text-align: right;
          font-size: $font-sm;
          color: $uni-color-primary;

          .icon-you {
            margin-left: 4rpx;
          }
        }
      }

      .coupon-title {
        text-align: center;
        padding: 30rpx 0;
        color: $font-color-dark;
      }

      /* 列表 */
      .coupon-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 10rpx;
        border-radius: 20rpx;

        .coupon-list-item {
          width: 100%;
          height: 110px;
          margin: 10rpx 0;
          background-image: url('/static/image/coupon_bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-radius: 5px;

          .coupon-left {
            text-align: center;
            color: #fff;

            .c1 {
              height: 80px;
              line-height: 80px;

              .amount {
                font-size: 100rpx;
                font-weight: 900;

                &:before {
                  content: '￥';
                  font-size: $font-lg;
                }
              }

              .discount {
                font-size: 100rpx;
                font-weight: 900;

                &:after {
                  content: '折';
                  font-size: $font-lg;
                }
              }
            }

            .c2 {
              font-size: $font-sm;
            }
          }

          .coupon-right {
            color: #fff;
            text-align: center;

            .c1 {
              padding-top: 20rpx;
            }

            .c2 {
              padding-top: 10rpx;
              font-size: $font-sm;
            }

            .c3 {
              padding-top: 30rpx;
            }
          }
        }
      }

      /* 评价 */
      .comment-list {
        padding: 30rpx;

        .eva-box {
          display: flex;
          padding: 20rpx 0;

          .portrait {
            flex-shrink: 0;
            width: 80rpx;
            height: 80rpx;
            border-radius: 100px;
          }

          .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            font-size: $font-base;
            color: $font-color-base;
            padding-left: 26rpx;

            .star {
              display: flex;

              image {
                width: 40rpx;
                height: 40rpx;
              }
            }

            .con {
              font-size: $font-base;
              color: $font-color-dark;
              padding: 20rpx 0;
            }

            .bot {
              display: flex;
              justify-content: space-between;
              font-size: $font-sm;
              color: $font-color-light;
            }
          }
        }

        .eva-image {
          display: flex;

          image {
            width: 160rpx;
            height: 160rpx;
            margin-right: 20rpx;
          }
        }

        .eva-reply {
          background-color: #F8F8F8;
          color: $font-color-light;
          font-size: 28rpx;
          padding: 10rpx;
          margin: 20rpx 0;
          border-radius: 20rpx;
        }
      }
    }
  }
</style>
